<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 从路由参数获取查询条件
const departureCity = ref(route.query.departureCity || '新乡')
const arrivalCity = ref(route.query.arrivalCity || '北京')
const trainDate = ref(route.query.trainDate || '')

// 当前选中的日期
const selectedDate = ref(trainDate.value || getTodayDate())

// 日期列表（今天及未来6天）
const dateList = ref([])

// 筛选选项
const searchType = ref('direct') // direct: 直达, transfer: 中转
const onlyHighSpeed = ref(false) // 只看高铁/动车
const onlyRegular = ref(false) // 只看普通车
const onlyAvailable = ref(false) // 只看有票


// 车次列表
const trainList = ref([])
const loading = ref(false)
const error = ref(null)

// 排序方式
const sortType = ref('departure') // departure: 发时最早, duration: 耗时最短, price: 价格最低

// 获取今天的日期
function getTodayDate() {
  const today = new Date()
  return today.toISOString().split('T')[0]
}

// 格式化日期显示
function formatDateDisplay(dateStr) {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  const month = date.getMonth() + 1
  const day = date.getDate()
  const weekday = weekdays[date.getDay()]
  
  const today = new Date()
  const tomorrow = new Date(today)
  tomorrow.setDate(tomorrow.getDate() + 1)
  
  if (dateStr === getTodayDate()) {
    return `今天 ${month}.${day}`
  } else if (dateStr === formatDate(tomorrow)) {
    return `明天 ${month}.${day}`
  } else {
    return `${weekday} ${month}.${day}`
  }
}

function formatDate(date) {
  return date.toISOString().split('T')[0]
}

// 初始化日期列表
function initDateList() {
  const today = new Date()
  dateList.value = []
  
  for (let i = 0; i < 7; i++) {
    const date = new Date(today)
    date.setDate(date.getDate() + i)
    dateList.value.push({
      date: formatDate(date),
      display: formatDateDisplay(formatDate(date))
    })
  }
}

// 查询火车票
async function searchTrains() {
  loading.value = true
  error.value = null
  
  try {
    // 构建查询参数
    const params = new URLSearchParams({
      search_type: '1',
      departure_station: departureCity.value,
      arrival_station: arrivalCity.value,
      date: selectedDate.value
    })
    
    // 添加筛选条件
    if (onlyHighSpeed.value) {
      params.append('filter', 'high_speed')
    } else if (onlyRegular.value) {
      params.append('filter', 'regular')
    }
    
    if (onlyAvailable.value) {
      params.append('enable_booking', '1')
    }
    
    const response = await fetch(`http://localhost:8000/user/train?${params.toString()}`)
    
    if (!response.ok) {
      throw new Error('网络请求失败')
    }
    
    const result = await response.json()
    
    // 处理不同的数据格式
    if (result && result.reason === 'success' && result.result && Array.isArray(result.result)) {
      // 后端返回格式: {reason: 'success', result: [...], error_code: 0}
      trainList.value = result.result
    } else if (result && result.resultcode === '200') {
      // 聚合数据格式
      if (result.result && result.result.list) {
        trainList.value = result.result.list
      } else if (result.result && Array.isArray(result.result)) {
        trainList.value = result.result
      } else if (Array.isArray(result.result)) {
        trainList.value = result.result
      } else {
        trainList.value = []
      }
    } else if (Array.isArray(result)) {
      // 直接是数组格式
      trainList.value = result
    } else if (result && result.data && Array.isArray(result.data)) {
      // 包装在data字段中
      trainList.value = result.data
    } else {
      trainList.value = []
      if (result && result.reason && result.reason !== 'success') {
        error.value = result.reason
      } else if (result && result.message) {
        error.value = result.message
      } else {
        error.value = '暂无车次信息'
      }
    }
    
    // 如果有数据，进行筛选和排序
    if (trainList.value.length > 0) {
      // 客户端筛选
      let filteredList = [...trainList.value]
      
      // 只看有票筛选
      if (onlyAvailable.value) {
        filteredList = filteredList.filter(train => {
          // 检查 prices 数组中是否有票
          if (train.prices && Array.isArray(train.prices)) {
            return train.prices.some(p => {
              const num = p.num
              return num && num !== '无' && num !== '0' && num !== '无票'
            })
          }
          // 检查其他格式的票务信息
          if (train.seats && typeof train.seats === 'object') {
            return Object.values(train.seats).some(seat => {
              if (typeof seat === 'object') {
                return seat.available !== false && (seat.count || seat.available === true)
              }
              return seat && seat !== '无' && seat !== '无票' && seat !== '0'
            })
          }
          return false
        })
      }
      
      // 只看高铁/动车筛选
      if (onlyHighSpeed.value) {
        filteredList = filteredList.filter(train => {
          const trainNo = train.train_no || train.train_number || train.number || ''
          return /^[GD]/.test(trainNo)
        })
      }
      
      // 只看普通车筛选
      if (onlyRegular.value) {
        filteredList = filteredList.filter(train => {
          const trainNo = train.train_no || train.train_number || train.number || ''
          return !/^[GD]/.test(trainNo)
        })
      }
      
      trainList.value = filteredList
      
      // 排序
      if (trainList.value.length > 0) {
        sortTrains()
      }
    }
  } catch (err) {
    console.error('查询火车票失败:', err)
    error.value = '网络错误，请稍后重试'
    trainList.value = []
  } finally {
    loading.value = false
  }
}

// 切换日期
function selectDate(date) {
  selectedDate.value = date
  searchTrains()
}


// 切换排序方式
function setSortType(type) {
  sortType.value = type
  sortTrains()
}

// 排序车次
function sortTrains() {
  if (!trainList.value.length) return
  
  const list = [...trainList.value]
  
  switch (sortType.value) {
    case 'departure':
      list.sort((a, b) => {
        const timeA = a.start_time || a.departure_time || '00:00'
        const timeB = b.start_time || b.departure_time || '00:00'
        return timeA.localeCompare(timeB)
      })
      break
    case 'duration':
      list.sort((a, b) => {
        const durationA = parseDuration(a.run_time || a.duration || '0小时0分' || '00:00')
        const durationB = parseDuration(b.run_time || b.duration || '0小时0分' || '00:00')
        return durationA - durationB
      })
      break
    case 'price':
      list.sort((a, b) => {
        let priceA = 0
        let priceB = 0
        
        // 优先从 prices 数组中取最小值
        if (a.prices && Array.isArray(a.prices) && a.prices.length > 0) {
          priceA = Math.min(...a.prices.map(p => p.price || 0))
        } else {
          priceA = parsePrice(a.price || a.min_price || '¥0')
        }
        
        if (b.prices && Array.isArray(b.prices) && b.prices.length > 0) {
          priceB = Math.min(...b.prices.map(p => p.price || 0))
        } else {
          priceB = parsePrice(b.price || b.min_price || '¥0')
        }
        
        return priceA - priceB
      })
      break
  }
  
  trainList.value = list
}

// 解析时长（支持两种格式：3小时2分 -> 182分钟，06:55 -> 415分钟）
function parseDuration(duration) {
  if (!duration) return 0
  
  // 处理 HH:mm 格式（如 "06:55"）
  if (duration.includes(':')) {
    const parts = duration.split(':')
    if (parts.length === 2) {
      const hours = parseInt(parts[0]) || 0
      const minutes = parseInt(parts[1]) || 0
      return hours * 60 + minutes
    }
  }
  
  // 处理 "3小时2分" 格式
  const hourMatch = duration.match(/(\d+)小时/)
  const minuteMatch = duration.match(/(\d+)分/)
  const hours = hourMatch ? parseInt(hourMatch[1]) : 0
  const minutes = minuteMatch ? parseInt(minuteMatch[1]) : 0
  return hours * 60 + minutes
}

// 解析价格（例如：¥281起 -> 281）
function parsePrice(price) {
  const match = price.match(/(\d+)/)
  return match ? parseInt(match[1]) : 0
}

// 格式化车次信息
function formatTrainInfo(train) {
  return {
    trainNo: train.train_no || train.train_number || train.number || '',
    departureTime: train.start_time || train.departure_time || '',
    arrivalTime: train.end_time || train.arrival_time || '',
    departureStation: train.start_station || train.departure_station || '',
    arrivalStation: train.end_station || train.arrival_station || '',
    duration: train.run_time || train.duration || '',
    price: train.price || train.min_price || '',
    seats: train.seats || {}
  }
}

// 返回上一页
function goBack() {
  router.back()
}

// 格式化时间
function formatTime(time) {
  if (!time || time === '--:--') return '--:--'
  // 如果时间格式是 HH:mm:ss，只取前5位
  if (time.length > 5) {
    return time.substring(0, 5)
  }
  return time
}

// 格式化座位信息
function formatSeatInfo(seat) {
  if (typeof seat === 'object') {
    if (seat.available === false) return '无票'
    if (seat.count) return seat.count + '张'
    return '有票'
  }
  if (seat === '有' || seat === '有票') return '有票'
  if (seat && seat !== '无' && seat !== '无票') return seat + '张'
  return '无票'
}

// 格式化座位数量
function formatSeatCount(count) {
  if (!count || count === '0' || count === '无') return '无票'
  if (count === '有' || count === '有票') return '有票'
  return count + '张'
}

// 获取座位类型名称
function getSeatTypeName(seatType) {
  const seatNames = {
    'second': '二等',
    'first': '一等',
    'business': '商务',
    'hard_seat': '硬座',
    'hard_sleeper': '硬卧',
    'soft_sleeper': '软卧',
    'no_seat': '无座',
    'edz': '二等',
    'ydz': '一等',
    'swz': '商务',
    'yz': '硬座',
    'yw': '硬卧',
    'rw': '软卧',
    'wz': '无座'
  }
  return seatNames[seatType] || seatType
}

onMounted(() => {
  initDateList()
  searchTrains()
})
</script>

<template>
  <div class="train-search-page">
    <!-- 顶部状态栏 -->
    <div class="status-bar">
      <div class="status-content">
        <div class="time">10:40</div>
        <div class="network-info">
          <span>10.3 KB/s</span>
          <span>5G</span>
          <span>5G</span>
          <span>95</span>
        </div>
      </div>
    </div>

    <!-- 顶部导航栏 -->
    <header class="top-header">
      <div class="header-content">
        <div class="back-btn" @click="goBack">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <div class="route-title">{{ departureCity }} <> {{ arrivalCity }}</div>
        <div class="more-btn">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="5" r="1.5" fill="currentColor"/>
            <circle cx="12" cy="12" r="1.5" fill="currentColor"/>
            <circle cx="12" cy="19" r="1.5" fill="currentColor"/>
          </svg>
        </div>
      </div>
    </header>

    <!-- 日期选择栏 -->
    <div class="date-selector">
      <div class="date-list">
        <div
          v-for="dateItem in dateList"
          :key="dateItem.date"
          :class="['date-item', { active: selectedDate === dateItem.date }]"
          @click="selectDate(dateItem.date)"
        >
          {{ dateItem.display }}
        </div>
        <div class="calendar-btn">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <rect x="3" y="4" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
            <line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2"/>
            <line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2"/>
            <line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"/>
          </svg>
          <span>日历</span>
        </div>
      </div>
    </div>

    <!-- 筛选选项 -->
    <div class="filter-section">
      <!-- 直达/中转切换 -->
      <div class="search-type-tabs">
        <div
          :class="['tab-item', { active: searchType === 'direct' }]"
          @click="searchType = 'direct'"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 8M21 12L17 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>直达</span>
        </div>
        <div
          :class="['tab-item', { active: searchType === 'transfer' }]"
          @click="searchType = 'transfer'"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 8M21 12L17 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>中转</span>
        </div>
      </div>

      <!-- 筛选复选框 -->
      <div class="filter-checkboxes">
        <label class="checkbox-item">
          <input type="checkbox" v-model="onlyHighSpeed" @change="searchTrains" />
          <span>只看高铁/动车</span>
        </label>
        <label class="checkbox-item">
          <input type="checkbox" v-model="onlyRegular" @change="searchTrains" />
          <span>只看普通车</span>
        </label>
        <label class="checkbox-item">
          <input type="checkbox" v-model="onlyAvailable" @change="searchTrains" />
          <span>只看有票</span>
        </label>
        <div class="filter-btn">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M3 6H21M6 12H18M9 18H15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <span>筛选</span>
        </div>
      </div>

    </div>

    <!-- 车次列表 -->
    <div class="train-list-container">
      <div v-if="loading" class="loading">加载中...</div>
      <div v-else-if="error" class="error">{{ error }}</div>
      <div v-else-if="trainList.length === 0" class="empty">暂无车次信息</div>
      <div v-else class="train-list">
        <div
          v-for="(train, index) in trainList"
          :key="index"
          class="train-item"
        >
          <!-- 车次类型标签 -->
          <div v-if="train.train_flags && train.train_flags.length > 0" class="train-flags">
            <span
              v-for="(flag, flagIndex) in train.train_flags"
              :key="flagIndex"
              class="train-type-tag"
            >
              {{ flag }}
            </span>
          </div>
          <div v-else-if="train.train_type" class="train-type-tag">
            {{ train.train_type }}
          </div>

          <!-- 车次信息 -->
          <div class="train-main-info">
            <div class="departure-info">
              <div class="time">{{ formatTime(train.start_time || train.departure_time || train.starttime || '--:--') }}</div>
              <div class="station">{{ train.start_station || train.departure_station || train.startstation || departureCity }}</div>
            </div>

            <div class="train-middle">
              <div class="train-number">
                {{ train.train_no || train.train_number || train.number || train.trainno || '--' }}
                <span v-if="train.redeem || train.canRedeem" class="redeem-tag blue">兑</span>
                <span v-else-if="train.redeemBerth" class="redeem-tag orange">兑铺</span>
              </div>
              <div class="duration">
                {{ train.run_time || train.duration || train.runtime || train.lishi || '--' }}
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path d="M12 2V6M12 18V22M6 12H2M22 12H18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  <circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="2"/>
                </svg>
              </div>
            </div>

            <div class="arrival-info">
              <div class="time">{{ formatTime(train.end_time || train.arrival_time || train.endtime || '--:--') }}</div>
              <div class="station">{{ train.end_station || train.arrival_station || train.endstation || arrivalCity }}</div>
            </div>
          </div>

          <!-- 价格和票务信息 -->
          <div class="train-price-info">
            <div class="price">
              <template v-if="train.prices && Array.isArray(train.prices) && train.prices.length > 0">
                ¥{{ Math.min(...train.prices.map(p => p.price || 0)) }}起
              </template>
              <template v-else>
                ¥{{ parsePrice(train.price || train.min_price || (train.yp_info && train.yp_info.price) || '¥0') }}起
              </template>
            </div>
            <div class="seats">
              <template v-if="train.prices && Array.isArray(train.prices)">
                <span
                  v-for="(priceInfo, index) in train.prices"
                  :key="index"
                  class="seat-item"
                >
                  {{ priceInfo.seat_name || getSeatTypeName(priceInfo.seat_type_code) }} {{ formatSeatCount(priceInfo.num) }}
                </span>
              </template>
              <template v-else-if="train.seats && typeof train.seats === 'object'">
                <span
                  v-for="(seat, seatType) in train.seats"
                  :key="seatType"
                  class="seat-item"
                >
                  {{ getSeatTypeName(seatType) }} {{ formatSeatInfo(seat) }}
                </span>
              </template>
              <template v-else-if="train.yp_info">
                <span v-if="train.yp_info.swz_num" class="seat-item">商务 {{ formatSeatCount(train.yp_info.swz_num) }}</span>
                <span v-if="train.yp_info.ydz_num" class="seat-item">一等 {{ formatSeatCount(train.yp_info.ydz_num) }}</span>
                <span v-if="train.yp_info.edz_num" class="seat-item">二等 {{ formatSeatCount(train.yp_info.edz_num) }}</span>
                <span v-if="train.yp_info.rz_num" class="seat-item">软座 {{ formatSeatCount(train.yp_info.rz_num) }}</span>
                <span v-if="train.yp_info.yz_num" class="seat-item">硬座 {{ formatSeatCount(train.yp_info.yz_num) }}</span>
                <span v-if="train.yp_info.yw_num" class="seat-item">硬卧 {{ formatSeatCount(train.yp_info.yw_num) }}</span>
                <span v-if="train.yp_info.rw_num" class="seat-item">软卧 {{ formatSeatCount(train.yp_info.rw_num) }}</span>
                <span v-if="train.yp_info.wz_num" class="seat-item">无座 {{ formatSeatCount(train.yp_info.wz_num) }}</span>
              </template>
              <template v-else>
                <span class="seat-item">二等 有票</span>
                <span class="seat-item">一等 有票</span>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部筛选和排序 -->
    <div class="bottom-actions">
      <div class="filter-action">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M3 6H21M6 12H18M9 18H15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <span>筛选</span>
      </div>
      <div class="sort-actions">
        <div
          :class="['sort-item', { active: sortType === 'duration' }]"
          @click="setSortType('duration')"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
            <path d="M12 6V12L16 16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <span>耗时最短</span>
        </div>
        <div
          :class="['sort-item', { active: sortType === 'departure' }]"
          @click="setSortType('departure')"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
            <path d="M12 6V12L16 16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <span>发时最早</span>
        </div>
        <div
          :class="['sort-item', { active: sortType === 'price' }]"
          @click="setSortType('price')"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
            <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
            <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
          </svg>
          <span>价格最低</span>
        </div>
      </div>
      <div class="waitlist-action">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M3 3H21L20 21H4L3 3Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
          <path d="M8 8H16M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <span>候补下单</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.train-search-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 80px;
}

/* 顶部状态栏 */
.status-bar {
  background: #000;
  color: #fff;
  padding: 4px 0;
  font-size: 12px;
}

.status-content {
  max-width: 375px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
}

.network-info {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 顶部导航栏 */
.top-header {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 375px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  height: 56px;
}

.back-btn,
.more-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #333;
}

.route-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 日期选择栏 */
.date-selector {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 12px 0;
}

.date-list {
  max-width: 375px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.date-list::-webkit-scrollbar {
  display: none;
}

.date-item {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.date-item.active {
  background: #1890ff;
  color: #fff;
  font-weight: 600;
}

.calendar-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
}

/* 筛选选项 */
.filter-section {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 16px;
}

.search-type-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  background: #f5f5f5;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.tab-item.active {
  background: #1890ff;
  color: #fff;
}

.filter-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}


/* 车次列表 */
.train-list-container {
  max-width: 375px;
  margin: 0 auto;
  padding: 16px;
}

.loading,
.error,
.empty {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
}

.train-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.train-item {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.train-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.train-type-tag {
  display: inline-block;
  padding: 2px 8px;
  background: #ff9800;
  color: #fff;
  font-size: 11px;
  border-radius: 4px;
}

.train-main-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.departure-info,
.arrival-info {
  flex: 1;
  text-align: left;
}

.arrival-info {
  text-align: right;
}

.time {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.station {
  font-size: 12px;
  color: #666;
}

.train-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}

.train-number {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 4px;
}

.redeem-tag {
  display: inline-block;
  padding: 2px 6px;
  color: #fff;
  font-size: 10px;
  border-radius: 4px;
}

.redeem-tag.blue {
  background: #1890ff;
}

.redeem-tag.orange {
  background: #ff9800;
}

.duration {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 4px;
}

.train-price-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.price {
  font-size: 18px;
  font-weight: 600;
  color: #ff6b35;
}

.seats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #666;
}

.seat-item {
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 4px;
}

/* 底部操作栏 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 100;
  max-width: 375px;
  margin: 0 auto;
}

.filter-action,
.waitlist-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #666;
  font-size: 12px;
  cursor: pointer;
}

.sort-actions {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.sort-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #666;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.sort-item.active {
  color: #1890ff;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .status-content,
  .header-content,
  .date-list,
  .filter-section,
  .train-list-container,
  .bottom-actions {
    max-width: 100%;
  }
}
</style>

